<script setup>
  import { ref } from 'vue';
  import ToolBar from './ToolBar.vue';
  import HTTPserver from '@/js/HTTPserver';
  let emit = defineEmits(['callback']);
  const props = defineProps({
    sort: {
      type: Number,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    description: {
      type: String,
      required: true,
    },
    url: {
      type: String,
      required: true,
    },
    img: {
      type: String,
      required: true,
    },
  });

  function openWebsite() {
    window.open(props.url, '_blank');
  }

  function edit() {
    console.log('edit');
  }

  function callback() {
    emit('callback');
  }

  function del() {
    let UsefWebs = { sort: props.sort };
    HTTPserver.delUsefWebs(UsefWebs, callback);
  }
</script>

<template>
  <div class="card_N2 color_white" @click="openWebsite">
    <ToolBar @edit="edit" @del="del"></ToolBar>
    <div style="width: 100%; height: 60%">
      <img style="object-fit: cover" class="img" :src="img" />
    </div>
    <div style="width: 100%; height: 40%; padding: 1rem">
      <div class="text_H4">{{ title }}</div>
      <div class="text_H5">{{ description }}</div>
    </div>
  </div>
</template>
